<template>

    <div>
        <el-tree
                :data="data"
                node-key="id"
                :default-expanded-keys="defaultExpandedKeys"
                :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                &nbsp;&nbsp;
                <span>
                    <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">增加节点</el-button>
                    <el-button type="text" size="mini" @click="() => update(data)">修改节点</el-button>
                    <el-button v-if="node.childNodes.length==0" type="text" size="mini"
                             @click="() => remove(node, data)">删除节点</el-button>
                </span>
            </span>
        </el-tree>


        <el-dialog title="分类表单" :visible.sync="dialogVisible" width="30%">
            <el-form :model="category">
                <el-form-item label="分类名称">
                    <el-input v-model="category.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="category.id == null?saveData():updateDate()">确 定</el-button>
            </span>
        </el-dialog>


    </div>

</template>

<script>
    export default {
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                defaultExpandedKeys: [],
                dialogVisible: false,
                category: {}
            };
        },
        methods: {
            getData() {
                this.$api.Category.listTree().then((data) => {
                    if (data && data.code === 0) {
                        this.data = data.categoryTreeList
                        console.log(data);
                    }
                })
            },
            append(data, parentNode) {
                this.category = {
                    name: "",
                    parentId: data.id,
                    sort: data.children ? data.children.length : 0 + 1,
                    catLevel: data.catLevel * 1 + 1,
                    icon: "",
                    showStatus: 1
                };
                this.dialogVisible = true;
                this.defaultExpandedKeys = [data.id];
            },
            saveData() {
                this.$api.Category.save(this.category).then((data) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getData()
                            }
                        })
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            update(data) {
                this.category = data;
                this.dialogVisible = true;
            },
            updateDate() {
                this.$api.Category.update(this.category).then((data) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getData()
                            }
                        })
                        this.dialogVisible = false;
                        this.defaultExpandedKeys = [this.category.id];
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            remove(node, data) {
                this.$confirm(`确定对节点[${data.name}]进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.Category.del([data.id]).then((data) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getData()
                                }
                            })
                            this.defaultExpandedKeys = [node.parent.data.id];
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }).catch(() => {
                })
            },
        },
        created() {
            console.log("执行create");
            this.getData();
        }
    };
</script>

<style scoped>

</style>
